<template>
    <div class="search-div">
        <!-- 搜索表单 -->
        <!-- template部分修改内容 -->
            <!-- 搜索表单 -->
            <el-form label-width="70px" size="medium">
                <el-form-item label="角色名称">
                    <el-input
                            v-model="queryDto.roleName"
                            style="width: 100%"
                            placeholder="角色名称"
                            ></el-input>
                </el-form-item>

                <el-row style="display:flex">
                    <el-button type="primary" size="medium" @click="searchSysRole">
                        搜索
                    </el-button>
                    <el-button size="medium" @click="resetData">重置</el-button>
                </el-row>
            </el-form>



             <!-- 添加按钮 -->
                <div class="tools-div">
                    <el-button type="success" size="medium" @click = "addShow">添 加</el-button>
                </div>




             <!--- 线索最新跟踪记录数据 -->
                <el-table :data="list" style="width: 100%">
                  
                    <el-table-column fixed prop="clueId" label="线索ID" width="80" />
                    
                    <el-table-column prop="startTime" label="开始时间" width="150" />
                    <el-table-column prop="followupTime" label="跟进时间" width="150" />
                    <el-table-column prop="followupDuration" label="跟进时长（分钟）" width="80" />
                    <el-table-column prop="followupMethod" label="跟进方式" width="80" />
                    <el-table-column prop="trackingRecord" label="跟踪情况记录" width="80" />
                    <el-table-column prop="intentLevel" label="意向程度"  width="80"/>
                    <el-table-column prop="trackingStatus" label="跟踪状态"  width="180"/>
                    <el-table-column prop="note" label="备注" />

                    

                    
                    <el-table-column label="操作" align="center" width="300" #default="scope">
                    <el-button type="primary" size="small" @click="clueDetails(scope.row)" >
                        线索详情
                    </el-button>
                    <el-button type="warning" size="small" @click="showAssignMenu(scope.row)">
                        跟进记录
                    </el-button>
                    <el-button type="danger" size="small" @click="ClueRotation(scope.row)">
                        轮转线索
                    </el-button>

                    </el-table-column>
                </el-table>

                <el-dialog v-model="dialogVisible" title="线索轮转" width="30%">
                <el-form label-width="120px">
                    <el-form-item label="原负责人">
                        <el-input v-model="sysRole.roleName"/>
                    </el-form-item>
                    <el-form-item label="新负责人">
                        <el-input  v-model="sysRole.roleCode"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>



                <el-dialog v-model="dialogMenuVisible" title="跟进记录" width="40%">
                    <el-form label-width="80px">
                        
                        <el-form-item>
                            <el-button type="primary" @click="doAssign">提交</el-button>
                            <el-button @click="dialogMenuVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                

                <!-- 线索详情 -->
                <el-dialog v-model="dialogClueVisible" title="线索详情" width="40%">
                    <el-form label-width="120px">
                        <el-form-item label="用户名姓名">
                            <el-input v-model="ClueDetail.customerName"/>
                        </el-form-item>
                       
                        <el-form-item label="性别">
                            <el-input v-model="ClueDetail.gender"/>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input v-model="ClueDetail.age"/>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="ClueDetail.contactNumber"/>
                        </el-form-item>
                        <el-form-item label="学历">
                            <el-input v-model="ClueDetail.education"/>
                        </el-form-item>
                        <el-form-item label="职业">
                            <el-input v-model="ClueDetail.occupation"/>
                        </el-form-item>

                        <el-form-item label="省份">
                            <el-input v-model="ClueDetail.province"/>
                        </el-form-item>
                        <el-form-item label="城市">
                            <el-input v-model="ClueDetail.city"/>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="ClueDetail.email"/>
                        </el-form-item>
                        <el-form-item label="旅行人数">
                            <el-input v-model="ClueDetail.travelersCount"/>
                        </el-form-item>
                        <el-form-item label="出行类型">
                            <el-input v-model="ClueDetail.traveLType"/>
                        </el-form-item>
                        <el-form-item label="意向产品">
                            <el-input v-model="ClueDetail.contactNumber"/>
                        </el-form-item>
                        <el-form-item label="线索来源">
                            <el-input v-model="ClueDetail.clueSource"/>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input  v-model="ClueDetail.note"/>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submit">提交</el-button>
                            <el-button @click="dialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>




            <!--分页条-->
            <el-pagination
                        v-model:current-page="pageParams.page"
                        v-model:page-size="pageParams.limit"
                        :page-sizes="[10, 20, 50, 100]"
                        @size-change="fetchData"
                        @current-change="fetchData"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
            />
  </div>

</template>

<script setup>

import { ref,onMounted } from "vue";

import { ElMessage, ElMessageBox } from 'element-plus'

//定义数据模型

////////////////////////////角色列表


// 表格数据模型
const list = ref([
    {"id":1 , "userName":"admin" , "name": "admin" , "phone":"13121034567" , "status":1 , "createTime": "2023-05-11"} ,
    {"id":2 , "userName":"admin" , "name": "admin" , "phone":"13121034567" , "status":1 , "createTime": "2023-05-11"} 
]);
let total = ref(0) //总记录数

const pageParamsForm = {
    page: 1, //当前页
    limit: 3 //每页记录数
}

const pageParams = ref(pageParamsForm)

const queryDto = ref({"roleName":""}) //条件封装数据

//钩子方法
onMounted(() => {
    fetchData()
} )


//操作方法： 列表方法 搜索方法
const fetchData = async() => {
    const {data,code,message} = await GetSysRoleListByPage( pageParams.value.page, pageParams.value.limit,queryDto.value)
    list.value = data.list
    total.value = data.total
}


const searchSysRole = () => {
    fetchData()
}


////////////////////////////角色添加
// 控制对话是否展示的变量
const dialogVisible = ref(false)
//进入添加
const addShow = () => {
    sysRole.value = {}
  	dialogVisible.value = true
}

// 修改界面回显
const editShow = (row) => {
    sysRole.value = {...row}
    dialogVisible.value = true
}

//表单数据模型
const defaultForm = {
    id: "",
    roleCode: "",
    roleName: ""
}
const sysRole = ref(defaultForm)   // 使用ref包裹该对象，使用reactive不方便进行重置
 
// 添加角色
const submit = async () => {

     dialogVisible.value = false

}

//线索详细信息
//表格存储的对象格式
const defaultClueFrom = {
    clueId:"",
    idNumber: "",
    customerName:"",
    gender:"",
    age:"",
    education:"",
    occupation:"",
    province:"",
    city:"",
    contactNumber:"",
    email:"",
    travelersCount:"",
    traveLType: "",
    intentionalProductId:"",
    createdTime:"",
    clueSource:"",
    note:"",
};

const ClueDetail = ref(defaultClueFrom)


//////////////////////////////////线索跟踪记录

 //////////////////////////////////////////////////线索跟踪记录
 const TrackClueForm = {
      clueTrackingId: 0,
      clueId: 0,
      salespersonId: 0,
      startTime: "",
      followupTime: "",
      followupDuration: 0,
      followupMethod: "",
      trackingRecord: "",
      intentLevel: 0,
      trackingStatus: 0,
      note: "",
    };
    const clueTracking = ref(TrackClueForm);

/////////////////////////////跟进记录

const dialogMenuVisible = ref(false)

const showAssignMenu = async row => { 
  dialogMenuVisible.value = true
}

//////////////////////////////线索详细

const defaultClueFrom = {
    clueId:"",
    idNumber: "",
    customerName:"",
    gender:"",
    age:"",
    education:"",
    occupation:"",
    province:"",
    city:"",
    contactNumber:"",
    email:"",
    travelersCount:"",
    travelType:"",
    intentionalProductId:"",
    createdTime:"",
    clueSource:"",
    note:"",
};

const ClueDetail = ref(defaultClueFrom)

const dialogClueVisible = ref(false)

const clueDetails = async (row) => {

    const data = await FindClueById(row.clueId);
    ClueDetail.value = data.data
    
    console.log(data);
    dialogClueVisible.value = true
}

/////////////////////////线索更改
const submitClue = async() => {
    console.log(ClueDetail.value) 
    const { code } = await UpdataByClueId(ClueDetail.value);
    console.log(code)
    dialogClueVisible.value = false
}


const trackState = (row) => {
  switch (row.trackingStatus) {
    case 0:
      return '未处理';
    case 1:
      return '已联系';
    case 2:
      return '已放弃';
    case 3:
      return '已成交';
    case 4:
      return '已轮转';
    default:
      return '未知状态';
  }
};

const intentLevelstate = (row) => {
  switch (row.intentLevel) {
    case 0:
      return '无意向';
    case 1:
      return '一般';
    case 2:
      return '有意向';
    case 3:
      return '未确定';
    default:
      return '未知状态';
  }
};


//创建轮转对象
const defaultClueRotalFrom = {
  rotationId: "",
  clueId: "",
  salespersonId: "",
  creatorId: "",
  rotationReason: "",
  note: ""
};

const ClueRotal = ref(defaultClueRotalFrom);

// 控制对话是否展示的变量
const dialogVisible = ref(false)

// 轮转线索
const ClueRotation = (row) => {
    ClueRotal.value = {}
    ClueRotal.value.clueId = row.clueId
    dialogVisible.value = true
}

const ClueRotationSubmit = async() => {

    ClueRotal.value.creatorId = salespersonId;
    const data = await InsertClueRotation(ClueRotal.value)

    dialogVisible.value = false
    ElMessage.success('轮转成功')
    fetchData()
    
}



// 创建一个函数来将数字转化为相应的跟踪状态描述



</script>

<style scoped>
.customWidth {
  width: 100%;
  height: 500px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
